<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <script src="./lib/vue-2.4.0.js"></script>
    </head>
    <body>
        <div id="app">
            <a href="" @click.prevent="comName='num1'">tab1</a>
            <a href="" @click.prevent="comName='num2'">tab2</a>
            <a href="" @click.prevent="comName='num3'">tab3</a>
            <a href="" @click.prevent="comName='num4'">tab4</a>

            <!-- //公共标签组件 component -->
            <component :is="comName"></component>
        </div>
        <script>
            Vue.component('num1',{
                template:'<p>tab栏1</p>'
            })
            Vue.component('num2',{
                template:'<p>tab栏2</p>'
            })
            Vue.component('num3',{
                template:'<p>tab栏3</p>'
            })
            Vue.component('num4',{
                template:'<p>tab栏4</p>'
            })
            var vm = new Vue({
                el: '#app',
                data: {
                    comName:'num1'
                },
                methods:{

                }
            })
        </script>
    </body>
</html>